 <template>
    <div class="second_level_page info_page">
        <section class="head_img_container">
            <div class="head_img_group item_group">
                <input type="file" class="profileinfopanel-upload" @change="uploadAvatar">
                <img class="icon_image left" src="../../../images/infoIcon0.png">
                <div class="title left">头像</div>
                <div class="content right">
                    <img src="../../../images/goodsDefault.png">
                    <div class="svg_content right">
                        <svg>
                            <use :xlink:href="'#moreArrowBlack'"></use>
                        </svg>
                    </div>
                </div>
            </div>
        </section>
        <section class="info_container">
            <div class="item_group">
                <img class="icon_image left" src="../../../images/infoIcon1.png">
                <div class="title left">手机</div>
                <div class="content right">
                    15122228888
                    <div class="svg_content right">
                        <svg>
                            <use :xlink:href="'#moreArrowBlack'"></use>
                        </svg>
                    </div>
                </div>
            </div>
            <div class="item_group">
                <img class="icon_image left" src="../../../images/infoIcon2.png">
                <div class="title left">姓名</div>
                <div class="content right">
                    Clare
                    <div class="svg_content right">
                        <svg>
                            <use :xlink:href="'#moreArrowBlack'"></use>
                        </svg>
                    </div>
                </div>
            </div>
            <div class="item_group">
                <img class="icon_image left" src="../../../images/infoIcon3.png">
                <div class="title left">性别</div>
                <div class="content right">
                    男
                    <div class="svg_content right">
                        <svg>
                            <use :xlink:href="'#moreArrowBlack'"></use>
                        </svg>
                    </div>
                </div>
            </div>
        </section>
        <section class="info_container">
            <div class="item_group">
                <img class="icon_image left" src="../../../images/infoIcon3.png">
                <div class="title left">生日</div>
                <div class="content right">
                    1978/10/10
                    <div class="svg_content right">
                        <svg>
                            <use :xlink:href="'#moreArrowBlack'"></use>
                        </svg>
                    </div>
                </div>
            </div>
            <div class="item_group">
                <img class="icon_image left" src="../../../images/infoIcon4.png">
                <div class="title left">岗位</div>
                <div class="content right">
                    运营中心-销售代表
                    <div class="svg_content right">
                        <svg>
                            <use :xlink:href="'#moreArrowBlack'"></use>
                        </svg>
                    </div>
                </div>
            </div>
        </section>
        <section class="shopping_container">
            <router-link to="/profile/info/modifyPassword" class="item_group">
                <img class="icon_image left" src="../../../images/infoIcon6.png">
                <div class="title left">修改密码</div>
                <div class="content svg_content right">
                    <svg>
                        <use :xlink:href="'#moreArrowBlack'"></use>
                    </svg>
                </div>
            </router-link>
        </section>
        <div class="exit_login" @click="exitlogin">
            退出登录
        </div>

        <section class="coverpart" v-if="show">
            <section class="cover-background"></section>
            <section class="cover-content " :class="{'cover-animate' : isEnter, 'cover-animate-leave' : isLeave}">
                <div class="sa-icon">
                    <img src="../../../images/tipIcon.png">
                </div>
                <h2>是否退出登录</h2>
                <div class="sa-botton">
                    <button class="waiting" @click="waitingThing">再等等</button>
                    <button class="quitlogin"  @click="outLogin">退出登录</button>
                </div>
            </section>
        </section>

        <transition name="router-slid" mode="out-in">
            <router-view></router-view>
        </transition>
    </div>
</template>

<script>
    import {mapMutations, mapState} from 'vuex'
    import alertTip from 'src/components/common/alertTip'
    import {getImgPath} from 'src/components/common/mixin'
    import {imgBaseUrl,baseUrl} from 'src/config/env'
    import {removeStore} from 'src/config/mUtils'
    import loading from 'src/components/common/loading'

    export default {
        data(){
            return{
                show:false,     //显示提示框
                isEnter:true,  //是否登录
                isLeave:false, //是否退出
            }
        },
        mounted(){
        },
        components: {
        },
        methods: {
            ...mapMutations([
                'OUT_LOGIN', 'SAVE_AVANDER'
            ]),
            exitlogin(){
                this.show=true;
                this.isEnter=true;
                this.isLeave=false;
            },
            waitingThing(){
                //取消推出
                clearTimeout(this.timer)
                this.isEnter=false;
                this.isLeave=true;
                this.timer = setTimeout(() =>{
                    clearTimeout(this.timer)
                    this.show=false;
                },200)
            },
            //退出登录
            async outLogin(){
                this.OUT_LOGIN();
                removeStore('supplierInfo');
                removeStore('user_id');
                this.waitingThing();
                this.$router.replace('/login');
            },
            async uploadAvatar(){
                //上传头像
                if (this.userInfo) {
                    let input = document.querySelector('.profileinfopanel-upload')
/*                    let data = new FormData();

                    data.append('file', input.files[0]);
                    data.append('type', 4);
                    data.append('sellerId', 1);*/
                    try{
                        this.showLoading = true;
                        let res = await uploadheadImage(input.files[0],4,1);
                        this.showLoading = false;
                     //   let res = await response.json();
                        if (res.resultCode == 200) {
                            this.showLoading = true;
                            this.userInfo.headImg = imgBaseUrl+res.data;
                            await editSellerHeadImg(res.data,this.userInfo.token);
                            this.showLoading = false;
                        }
                    }catch (error) {
                        this.showAlert = true;
                        this.alertText = '上传失败';
                        alert(error);
                    }
                }
            }
        },
    }
</script>

<style lang="scss" scoped>
    @import 'src/style/mixin.scss';

    .head_img_container{
        background: #fff;
        margin-top: .2rem;
        .head_img_group{
            height: 1.66rem;
            line-height: 1.28rem;
            padding-top: .19rem;
            .icon_image{
                float: left;
                @include wh(.46rem, .46rem);
                margin: .41rem .18rem 0 0;
            }
            img{
                @include wh(1.28rem, 1.28rem);
                border-radius: .64rem;
            }
            .content{
                line-height: 0;
            }
            .svg_content{
                height: 1.28rem;
                line-height: 1.28rem;
            }
        }
    }
    .info_container{
        background: #fff;
        margin-top: .2rem;
    }
    .shopping_container{
        background: #fff;
        margin-top: .2rem;
    }
    .item_group{
        clear: both;
        padding-left: .2rem;
        border-bottom: .01rem solid #f4f4f4;
        height: 1rem;
        line-height: 1rem;
        position: relative;
        display: block;
        .profileinfopanel-upload{
            display: block;
            position: absolute;
            opacity: 0;
            top: 0;
            left: 0;
            @include wh(100%,100%);
        }
        .icon_image{
            float: left;
            @include wh(.46rem, .46rem);
            margin: .27rem .18rem 0 0;
        }
        .title{
            @include sc(.3rem, #333);
        }   
        .content{
            @include sc(.28rem, #666);
            padding-right: .24rem;
        }
        .svg_content{
            padding-left: .1rem;
            svg{
                @include wh(.14rem, .2rem);
            }
        }
    }
    .item_group:last-child{
        border-bottom: 0;
    }
    .exit_login{
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: .96rem;
        background: $blue;
        border-top: .01rem solid #e3e3e3;
        text-align: center;
        line-height: .96rem;
        @include sc(.3rem, #fff);
    }


    .coverpart{
        @include wh(100%,100%);
        @include allcover;
        .cover-background{
            @include wh(100%,100%);
            @include allcover;
            background: rgba(0,0,0,.7);
            z-index:100;
        }
        .cover-content{
            width: 5.4rem;
            background: #fff;
            padding: .2rem;
            position:absolute;
            top:50%;
            left:50%;
            z-index:1000;
            margin-top: -1.75rem;
            margin-left: -2.7rem;
            @include borderRadius(.1rem);
            .sa-icon{
                @include borderRadius(50%);
                margin:.2rem 0 .3rem;
                position:relative;
                text-align: center;
                @include wh(100%, 1.16rem);
                img{
                    @include wh(1.16rem, 1.16rem);
                }
            }
            h2{
                @include wh(100%, .3rem);
                text-align:center;
                @include sc(.3rem,#333);
                line-height: .3rem;
            }
            .sa-botton{
                margin-top: .38rem;
                @include wh(100%, .8rem);
                clear: both;
                button{
                    float: left;
                    width: 2.4rem;
                    display:inline-block;
                    @include borderRadius(.08rem);
                    @include sc(.3rem, #fff);
                    height: .8rem;
                    line-height: .8rem;
                    text-align: center;
                }
                .waiting{
                    background:#C1C1C1;
                    margin-right: .1rem;
                }
                .quitlogin{
                    margin-left: .1rem;
                    background: $blue;
                }
            }

        }
    }
@-webkit-keyframes bounceIn {
  from, 20%, 40%, 60%, 80%, 100% {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(.9, .9, .9);
    transform: scale3d(.9, .9, .9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(.97, .97, .97);
    transform: scale3d(.97, .97, .97);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes bounceIn {
  from, 20%, 40%, 60%, 80%, 100% {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(.9, .9, .9);
    transform: scale3d(.9, .9, .9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(.97, .97, .97);
    transform: scale3d(.97, .97, .97);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@-webkit-keyframes zoomOut {
  from {
    opacity: 1;
  }

  50% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  100% {
    opacity: 0;
  }
}

@keyframes zoomOut {
  from {
    opacity: 1;
  }

  50% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  100% {
    opacity: 0;
  }
}
body .coverpart .cover-animate{
    transition:all 1s;
    animation:bounceIn .6s;
}
body .coverpart .cover-animate-leave{
    animation:zoomOut .4s;
}
.router-slid-enter-active, .router-slid-leave-active {
    transition: all .4s;
}
.router-slid-enter, .router-slid-leave-active {
    transform: translate3d(2rem, 0, 0);
    opacity: 0;
}
</style>
